<template>
  <el-button @click="setMeta">设置查询属性</el-button><br>
  <nf-find
    :findValue="findValue"
    :findArray="findArray"
    v-bind="findMeta"
  >
  </nf-find>
  <div
    v-for="(item, key, index) in findValue"
    :key="index"
  >
    {{key}}： {{item}}
  </div>
  <hr>
  <div
    v-for="(item, key, index) in findArray"
    :key="index"
  >
    {{key}}： {{item}}
  </div>
  <help-find
    :drawerInfo="drawerInfo"
    :meta="findMeta"
    :findDom="findDom"
  >
  </help-find>
  <help-text
    :drawerInfo="formDrawerInfo"
    :meta="textProps"
  >
  </help-text>
</template>

<script>
  import { reactive, nextTick, watch, ref, defineAsyncComponent } from 'vue'
  import { ElButton, ElTabs, ElTabPane } from 'element-plus'
  import { createModel, lifecycle } from '/nf-ui-core'
  import { helpFind, helpText } from '/nf-meta-help'
  import _findMeta from './find.json'

</script>

<script setup>
  lifecycle('设置查询属性', true)
 
  // 获取表单控件需要的meta
  const findMeta = reactive(_findMeta)

  // 根据 meta 创建表单的 model
  const findValue = reactive({})
  const findArray = reactive([])

  // 表单的对象
  const findDom = ref(null)

  // 控制 表单 抽屉的展开收拢
  const drawerInfo = reactive({
    isShow: false,
    isLoad: false
  })

  // 
  const setMeta = () => {
    drawerInfo.isShow = true
    drawerInfo.isLoad = true
  }

  // 控制 字段 抽屉的展开收拢
  const formDrawerInfo = reactive({
    isShow: false
  })

  // 要修改的字段 的 meta
  const textProps = reactive({})


</script>